import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:mjpeg_view/mjpeg_view.dart';


class FromHttpPage extends StatelessWidget 
{
  static final List<String> ips = const ["192.168.1.100", "192.168.1.101", "192.168.1.102"];
  final MjpegController controller1 = MjpegController.fromHttp(url: "http://${FromHttpPage.ips[0]}/stream", autoControl: true);
  final MjpegController controller2 = MjpegController.fromHttp(url: "http://${FromHttpPage.ips[1]}/stream");
  final MjpegController controller3 = MjpegController.fromHttp(url: "http://${FromHttpPage.ips[2]}/stream");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("MJPEG From HTTP"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            Container(
              width: double.infinity,
              height: 170,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 20,
                itemBuilder: (_, index) => Padding(
                  padding: EdgeInsets.all(5),
                  child: Column(
                    children: [
                      Container(
                        width: 142,
                        height: 80,
                        color: Colors.grey,
                        child: index != 10 ? null : MjpegView(
                          controller: this.controller1,
                          quality: FilterQuality.high,
                          errorBuilder: (context, error) => Center(child: Text("ERROR", style: TextStyle(color: Colors.amber, fontSize: 30))),
                          statusBuilder: (context, status, child) {
                            if (status != MjpegControllerStatusValue.playing)
                              return Center(child: Text(status.toString().split('.')[1], style: TextStyle(color: Colors.blueAccent, fontSize: 28)));
                            return child;
                          },
                        )
                      ),
                      Padding(padding: EdgeInsets.all(5)),
                      ChangeNotifierProvider<MjpegControllerStatus>.value(
                        value: this.controller1.status,
                        child: Consumer<MjpegControllerStatus>(
                          builder: (context, value, child) => Text(index != 10 ? value.value.toString().split(".")[1] : FromHttpPage.ips[0])
                        )
                      )
                    ],
                  ),
                )
              ),
            ),
            Padding(padding: EdgeInsets.all(5)),
            Container(
              width: double.infinity,
              height: 170,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 2,
                itemBuilder: (_, index) => Container(
                  padding: EdgeInsets.all(5),
                  child: Draggable(
                    child: Column(
                      children: [
                        Container(
                          width: 142,
                          height: 80,
                          child: MjpegView(
                            controller: [this.controller2, this.controller3][index],
                            fit: BoxFit.fill,
                            noImageWidget: Center(child: Text("No Source!", style: TextStyle(color: Colors.amber, fontSize: 20))),
                          ),
                        ),
                        Padding(padding: EdgeInsets.all(5)),
                        Text(FromHttpPage.ips[index+1])
                      ],
                    ),
                    feedback: Container(
                      width: 142,
                      height: 80,
                      child: MjpegView(
                        controller: [this.controller2, this.controller3][index],
                        fit: BoxFit.fill,
                      ),
                    )
                  )
                )
              ),
            ),
            Padding(padding: EdgeInsets.all(5)),
            Expanded(child: Container()),
            Container(
              child: Column(
                children: List.generate(3, (index) => Row(
                  children: [
                    Padding(padding: EdgeInsets.only(left: 10),),
                    Text("Controller${index+1}: ${FromHttpPage.ips[index]}  "),
                    SizedBox(
                      width: 40,
                      child: FlatButton(
                        padding: EdgeInsets.zero,
                        color: Colors.orangeAccent,
                        textColor: Colors.white,
                        onPressed: () async {
                          var ctrl = [this.controller1, this.controller2, this.controller3][index];
                          var value = ctrl.status.value;
                          if ([MjpegControllerStatusValue.unknow, MjpegControllerStatusValue.timeouted].contains(value))
                            await ctrl.open();
                          else if ([MjpegControllerStatusValue.playing, MjpegControllerStatusValue.paused, MjpegControllerStatusValue.stopped, MjpegControllerStatusValue.ready].contains(value))
                            await ctrl.close();
                        },
                        child: ChangeNotifierProvider<MjpegControllerStatus>.value(
                          value: [this.controller1, this.controller2, this.controller3][index].status,
                          child: Consumer<MjpegControllerStatus>(
                            builder: (context, value, child) {
                              if ([MjpegControllerStatusValue.unknow, MjpegControllerStatusValue.timeouted].contains(value.value))
                                return Icon(Icons.not_started);
                              else if ([MjpegControllerStatusValue.playing, MjpegControllerStatusValue.paused, MjpegControllerStatusValue.stopped, MjpegControllerStatusValue.ready].contains(value.value))
                                return Icon(Icons.close);
                              else 
                                return Icon(Icons.do_not_disturb_alt);
                            },
                          ),
                        )
                      ),
                    ),
                    Padding(padding: EdgeInsets.all(5),),
                    SizedBox(
                      width: 40,
                      child: FlatButton(
                        padding: EdgeInsets.zero,
                        color: Colors.blueAccent,
                        textColor: Colors.white,
                        onPressed: () async {
                          var ctrl = [this.controller1, this.controller2, this.controller3][index];
                          var value = ctrl.status.value;
                          if (value == MjpegControllerStatusValue.playing)
                            await ctrl.pause();
                          else if ([MjpegControllerStatusValue.ready, MjpegControllerStatusValue.paused, MjpegControllerStatusValue.stopped].contains(value))
                            await ctrl.play();
                        },
                        child: ChangeNotifierProvider<MjpegControllerStatus>.value(
                          value: [this.controller1, this.controller2, this.controller3][index].status,
                          child: Consumer<MjpegControllerStatus>(
                            builder: (context, value, child) {
                              if (value.value == MjpegControllerStatusValue.playing)
                                return Icon(Icons.pause);
                              else if ([MjpegControllerStatusValue.ready, MjpegControllerStatusValue.paused, MjpegControllerStatusValue.stopped].contains(value.value))
                                return Icon(Icons.play_arrow);
                              else 
                                return Icon(Icons.do_not_disturb_alt);
                            },
                          ),
                        )
                      ),
                    ),
                  ],
                )),
              )
            ),
            Padding(padding: EdgeInsets.all(10)),
          ]
        )
      ),
    );
  }
}
